<template>
	<div class="mainer-container">
		<el-main>
			<el-row style="padding:20px 0;border-bottom: 1px solid #EBEEF5;">
				<el-col>
					<el-form :inline="true" :model="formInline">
						<el-form-item>
							<el-select v-model="formInline.status" placeholder="状态">
								<el-option label="不可用" value="0"></el-option>
								<el-option label="可用" value="1"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-input placeholder="请输入关键字" v-model="formInline.name"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="info" @click="queryPage()">查询</el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<el-table :data="tableData" stripe>
				<el-table-column prop="id" label="序号" sortable align="center"></el-table-column>
				<el-table-column prop="name" label="名称" align="center">
					<template slot-scope="{row}">
						{{row.name.toUpperCase()}}
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="日期" sortable align="center">
					<template slot-scope="{row}">
						{{$Moment(row.createTime).format("YYYY-MM-DD HH:mm:ss")}}
					</template>
				</el-table-column>
				<el-table-column prop="status" label="状态" align="center">
					<template slot-scope="{row}">
						<el-switch style="display: block;height: 22px;" @change="edit(row)" :value="row.status === 1 ? true:false" active-color="#67c23a" inactive-color="#e6a23c" active-text="可用" inactive-text="不可用"></el-switch>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" align="center">
					<template slot-scope="{row}">
						<el-button size="mini" @click="queryInfo(row)" type="primary">查看</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSize(size)" @current-change="handleNum(num)" @prev-click="handlePrev()" @next-click="handleNext()" :current-page.sync="num" :page-size="size" layout="prev, pager, next, total, jumper" :total="total"></el-pagination>
		</el-main>
		<el-dialog title='币种简介' :visible.sync="dialogVisible" width="50%">
			<template>
				<el-form ref="formData" :model="formData" label-width="100px" style="width: 90%;">
					<el-row>
						<el-col :span="16">
							<el-form-item label="名 称">
								<el-input v-model="formData.name"></el-input>
							</el-form-item>
							<el-form-item label="全 称">
								<el-input v-model="formData.fullName"></el-input>
							</el-form-item>
							<el-form-item label="项目编号">
								<el-input v-model="formData.projectCode"></el-input>
							</el-form-item>
							<el-form-item label="标 签">
								<ul v-for="item in formData.label" style="list-style: none;margin: 0;padding: 0;" :key="item.id">
									<li style="float: left;">
										<el-tag type="info" style="margin-left: 5px;">{{item }}</el-tag>
									</li>
								</ul>
							</el-form-item>
						</el-col>
						<el-col :span="7" :offset="1">
							<div style="width: 100%; text-align: center;">
								<el-image style="width: 80px; height: 80px;border-radius: 20%;" :src="formData.logo" fit="fit"></el-image>
								<div style="display: flex;justify-content: center;">
									<el-link :underline="false" :href="formData.githubUrl" target="_blank">
										<img style="width: 20px;margin-left: 10px;" src="@/assets/github/github.png" v-if="formData.githubUrl != null"/>
										<img style="width: 20px;margin-left: 10px;" src="" v-else/>
									</el-link>
									<el-link :underline="false" :href="formData.telegram" target="_blank">
										<img style="width: 20px;margin-left: 10px;" src="@/assets/telegram/telegram.png" v-if="formData.telegram != null"/>
										<img style="width: 20px;margin-left: 10px;" src="@/assets/telegram/telegram-2.png" v-else/>
									</el-link>
									<el-link :underline="false" :href="formData.facebook" target="_blank">
										<img style="width: 20px;margin-left: 10px;" src="@/assets/facebook/facebook.png" v-if="formData.facebook != null"/>
										<img style="width: 20px;margin-left: 10px;" src="@/assets/facebook/facebook-2.png" v-else/>
									</el-link>
									<el-link :underline="false" :href="formData.twitter" target="_blank">
										<img style="width: 20px;margin-left: 10px;" src="@/assets/twitter/twitter.png" v-if="formData.twitter != null"/>
										<img style="width: 20px;margin-left: 10px;" src="@/assets/twitter/twitter-2.png" v-else/>
									</el-link>
								</div>
							</div>
							<ul style="list-style: none; margin: 0;padding: 0;">
								<li v-for="item in formData.list" :key="item.id" style="float:left;margin-left: 30px; margin-top: 10px;">
									<div style="width: 100%;margin: 0;padding: 0;">
										<div style="display: flex;justify-content: start;">
											<el-image style="width: 40px; height: 40px;border-radius: 50%;" :src="item.avatar" fit="fit"></el-image>
										</div>
										<div style="display: flex;justify-content: center;">
											<el-link :underline="false" :href="item.linkedin" target="_blank" style="display: flex;align-items: center;">
												<img style="width: 20px;" src="@/assets/linked/linkedin.png" v-if="item.linkedin !=null"/>
												<img style="width: 20px;" src="@/assets/linked/linkedin-2.png" v-else/>
											</el-link>
											<span style="text-overflow: ellipsis;white-space:nowrap;overflow: hidden;width: 50px;">{{item.name}}</span>
										</div>
									</div>
								</li>
							</ul>
						</el-col>
					</el-row>
					<el-form-item label="发行总量">
						<el-input v-model="formData.totalAmount"></el-input>
					</el-form-item>
					<el-form-item label="流通总量">
						<el-input v-model="formData.circulation"></el-input>
					</el-form-item>
					<el-form-item label="官 网">
						<el-input v-model="formData.homePage"></el-input>
					</el-form-item>
					<el-form-item label="白皮书">
						<el-input v-model="formData.whitePaper"></el-input>
					</el-form-item>
					<el-form-item label="详 情">
						<div class="description" v-html='formData.description' style="padding: 0 15px; border-radius: 4px; border: 1px solid #DCDFE6;"></div>
					</el-form-item>
				</el-form>
			</template>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false" size="small">关闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "currencyInfo",
		data() {
			return {
				dialogVisible: false,
				num: 1,
				size: 8,
				formInline: {
					status: "",
					name: "",
				},
				tableData: [],
				total: 0,
				formData: {}
			}
		},
		created() {
			this.queryPage();
		},
		watch: {
			dialogVisible(newVal) {
				if (!newVal) {
					this.$refs['formData'].resetFields();
				}
			}
		},
		methods: {
			queryPage() {
				this.api.basicInfo.currency.queryPage({
					num: this.num,
					size: this.size,
					status: this.formInline.status,
					name: this.formInline.name,
				}).then(result => {
					result = result.data;
					if (result.code === 200) {
						this.tableData = result.data;
						this.num = result.page.num;
						this.size = result.page.size;
						this.total = result.page.total;
						this.formInline.status = "";
						this.formInline.name = "";
					} else {
						this.$message({
							message: result.message,
							type: "warning"
						});
					}
				}).catch(() => {
					this.$message({
						message: "网络错误",
						type: "danger"
					});
				});
			},
			queryInfo(row) {
				this.dialogVisible = true;
				this.api.basicInfo.currency.queryInfo({id: row.id}).then(result => {
					result = result.data;
					if (result.code === 200) {
						this.formData = result.data;
					} else {
						this.$message({
							message: result.message,
							type: "warning"
						});
					}
				}).catch(() => {
					this.$message({
						message: "网络错误",
						type: "danger"
					});
				});
			},
			edit(row) {
				this.$confirm('确认调整【' + row.name + '】状态嘛？').then(() => {
					row.status = (row.status === 1) ? 0 : 1;
					this.api.basicInfo.currency.edit(row).then(result => {
						result = result.data;
						if (result.code === 200) {
							this.$message(result.data)
						} else {
							this.$message({
								message: result.message,
								type: "warning"
							});
						}
					}).catch(() => {
						this.$message({
							message: "网络错误",
							type: "danger"
						});
					});
				});
			},
			handlePrev() {
				this.num -= 1;
				this.queryPage();
			},
			handleNext() {
				this.num += 1;
				this.queryPage();
			},
			handleSize(size) {
				this.size = size;
				this.queryPage();
			},
			handleNum(num) {
				this.num = num;
				this.queryPage();
			}
		}
	}
	;
</script>

<style scoped>
	.breadcrumb-container {
		padding-left: 24px;
		padding-top: 24px;
	}

	.mainer-container {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		margin-bottom: 5px;
	}

	.el-pagination {
		width: 100%;
		text-align: center;
	}

	.description img {
		width: 9%;
	}
</style>
